/*
 * @Author: xianfuyou
 * @Date: 2022-04-01 11:09:51
 * @LastEditors: your name
 * @LastEditTime: 2022-04-11 21:34:05
 * @Description: file content
 */
import React, { useState } from 'react'
import ButtonWarpCpn from '../../components/CommBtn/CommBtn'
import { Modal, Row, Col, List, Image, Button, Tag, Table, Tooltip, Form, Upload, Input, message } from 'antd'
import { DeleteFilled, FolderFilled, CloseCircleFilled, UploadOutlined, remarkOnChange } from '@ant-design/icons'

import './css/Model.css'
import Axios from '../../utils/myAxios'
import Qs from 'qs'
import store from '../../redux/store'
import { getOrderListsAction } from '../../redux/action/orderAction/orderAction'


const { TextArea } = Input
const accessoryArr = [];
for (let i = 0; i < 10; i++) {
  accessoryArr.push({
    key: i,
    accessoryTitle: `王者`,
    fileSize: `王者王者`,
    remark: '100',
    salesman: `富贵`,
    putTime: '2022-03-30',
  });
}

export default function AccessoryModel(props) {
  // const baseUrl = 'http://139.155.237.161:8080'
  // console.log(props)
  const { isShow, nowStatus, pHandleOk, nowId, requestJson, pHandleCancel } = props
  // 缩略图和列表显示
  const [currCheck, setCurrCheck] = useState(true)
  // 缩略图删除
  const [delImage, setDelImage] = useState(false)
  // 上传附件弹窗
  const [uploadAcc, setUploadAcc] = useState(false)
  const [fileListAcc, setFileListAcc] = useState([])
  // 当前删除id
  const [delId, setDelId] = useState(null)

  const [form] = Form.useForm()
  // 获取传递的附件列表及业务员
  // 列表数据

  // 跟单表单配置
  const accessoryLists = [
    {
      title: '附件标题',
      dataIndex: 'accessoryTitle',
      key: 'accessoryTitle',
      width: 120,
    },
    {
      title: '文件大小',
      dataIndex: 'fileSize',
      key: 'fileSize',
      width: 80,
    },
    {
      title: '下载地址',
      dataIndex: 'downLoadAddress',
      key: 'downLoadAddress',
      width: 80,
      render: (downLoadAddress, record) => {
        return <Tag color="#5cad69" style={{ "cursor": "pointer" }}>查看</Tag>
      }
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 100,
    },
    {
      title: '业务员',
      dataIndex: 'salesman',
      key: 'salesman',
      width: 100,
    },
    {
      title: '上传时间',
      dataIndex: 'putTime',
      key: 'putTime',
      width: 100,
    },
    {
      title: '管理',
      dataIndex: 'manage',
      key: 'manage',
      width: 80,
      render: (manage, record) => {
        return <DeleteFilled onClick={() => { delCurrImage(record) }} style={{ "color": '#c00000', "cursor": "pointer" }} />
      }
    }
  ]

  const handleOk = () => {
    // 根据当前状态传递不同的数据
    setUploadAcc(true)
  };

  const handleCancel = () => {
    pHandleCancel(false);
  };

  // 确认删除缩略图
  const delHandleOk = () => {
    setDelImage(false)
    Axios.post('/orderEnclosure/deleteEnclosureById',
      Qs.stringify({ id: delId }),
      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
      .then(res => {
        console.log(res)
        setDelId(null)
      }).catch(err => {
        message.error('删除失败')
      })
  }
  // 点击删除
  const delCurrImage = (id) => {
    setDelImage(true)
    setDelId(id)
  }
  // 截取url
  const subUrl = (str) => {
    let reg = /(.)+upload/i
    let newStr = str.replace(reg, "/upload")
    return newStr
  }
  // 截取tittle
  const subTittle = (str) => {
    return str.substring(-1, 10)
  }

  // 上传附件
  const uploadAccOk = () => {
    let formData = new FormData()
    formData.append('file', fileListAcc[0])
    formData.append('id', nowId)
    Axios.post('/orderEnclosure/insertEnclosureById', formData).then(res => {
      console.log(res)
      if (res.data.code === 200) {
        message.success('上传成功')
        store.dispatch(getOrderListsAction(requestJson))
        pHandleOk(false)
      } else {
        message.error('上传失败')
      }
      setUploadAcc(false)
    })
  }
  // 图片上传
  const ImageChange = info => {
    console.log(info)
    const { file } = info
    setFileListAcc([file])
  }
  return (
    <div className="xfy-accessory">
      {/* 删除弹窗 */}
      <Modal
        className='xfy_dep_add_modal del_modal'
        title="消息"
        okText="确定"
        cancelText="取消"
        visible={delImage}
        onOk={delHandleOk}
        onCancel={() => { setDelImage(false) }}
        destroyOnClose={true}
        forceRender={true}
        zIndex={2000}
      >
        <Row align='middle' gutter={10}>
          <Col> <CloseCircleFilled style={{ color: '#faa685', fontSize: '36px' }} /></Col>
          <Col> <span>是否确定删除?</span></Col>
        </Row>
      </Modal>
      {/* 上传附件 */}
      <Modal
        className='xfy_dep_add_modal upload_modal'
        title="上传附件"
        okText="保存"
        cancelText="取消"
        visible={uploadAcc}
        onOk={() => { uploadAccOk() }}
        onCancel={() => {
          // 点击取消清空Model框
          setUploadAcc(false)
          form.resetFields()
          setFileListAcc([])
        }}
        destroyOnClose={true}
        forceRender={true}
        zIndex={2000}
      >
        <h3 style={{ fontWeight: '700' }}>新增附件记录</h3>
        <Form preserve={false} form={form}>
          <Form.Item label="请选择" name="chooseFile" className="upload">
            <Upload maxCount={1} multiple={true} customRequest={ImageChange} fileList={fileListAcc}>
              <Button style={{ backgroundColor: '#00b7ee', color: '#fff' }}>选择文件</Button>
            </Upload>
          </Form.Item>
          <Form.Item label="备注" name="remark" labelCol={{ span: 4 }}>
            <TextArea rows={4} placeholder="" />
          </Form.Item>
        </Form>
      </Modal>
      {/* 订单附件 */}
      <Modal
        className='accessory_modal'
        title="订单附件"
        okText="上传"
        cancelText="关闭"
        visible={isShow}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose={true}
        forceRender={true}
        zIndex={1000}
      >
        <Row>
          {/* 按钮切换 */}
          <Col span={24} className={"accessory-btn"}>
            <Button onClick={() => { setCurrCheck(true) }} style={{ "backgroundColor": currCheck ? "#f56659" : "#488dc9" }}>缩略图</Button>
            <Button onClick={() => { setCurrCheck(false) }} style={{ "backgroundColor": !currCheck ? "#f56659" : "#488dc9" }}>列表显示</Button>
          </Col>
          {/* 图片缩略图 */}
          <Col span={24} className={'accessory-images'} style={{ 'display': currCheck ? '' : 'none' }}>
            <List
              grid={{ gutter: 16, column: 4 }}
              dataSource={nowStatus}
              renderItem={item => (
                <List.Item>
                  <Row justify={'center'} className={'image-list'}>
                    <Col span={24} className={'name'}>
                      {subTittle(item.title)}
                    </Col>
                    <Col className={'image'}>
                      <Tooltip placement="topRight" title={item.title}>
                        <Image
                          preview={true}
                          width={150}
                          height={150}
                          src={`http://139.155.237.161:8080${subUrl(item.orderEnclosure)}`}
                        />
                      </Tooltip>
                    </Col>
                    <Col span={24} className={'handel-btn'}>
                      <Button size="small" icon={<FolderFilled />} style={{ backgroundColor: '#5294bf' }}>查看</Button>
                      <Button size="small" onClick={() => { delCurrImage(item.id) }} icon={<DeleteFilled />} style={{ backgroundColor: '#ce5a6a' }}>删除</Button>
                    </Col>
                  </Row>
                </List.Item>
              )}
            />
          </Col>
          {/* 列表显示 */}
          <Col span={24} style={{ 'display': !currCheck ? '' : 'none' }}>
            <Table
              pagination={{
                defaultCurrent: 2,
                pageSize: 5,
                showSizeChanger: true,
                pageSizeOptions: [2, 3, 4, 5]
              }}
              size="small"
              columns={accessoryLists}
              dataSource={accessoryArr}
              onRow={(record) => {
                return {
                  onClick: () => { console.log('record123123123=====', record) }
                }
              }}
            />
          </Col>
        </Row>
      </Modal>
    </div>
  )
}
